1 00:00:00,630 --> 00:00:03,070 Hello and welcome to this lecture. 2 00:00:03,240 --> 00:00:11,610 In this show we are going to create the structure for our contact for use in Haiti. 3 00:00:11,610 --> 00:00:12,960 Email. 4 00:00:13,890 --> 00:00:15,180 Hi. 5 00:00:15,270 --> 00:00:23,350 In my projects Sundays going to click on my hastier mail file here which is the indexed text email I 6 00:00:23,400 --> 00:00:28,690 have already got some basic tags already in the documents. 7 00:00:28,710 --> 00:00:35,020 These are what will we'll be using for creating the stropped are run through this. 8 00:00:35,130 --> 00:00:39,510 Sure you know what each of these tags to the first line here. 9 00:00:39,510 --> 00:00:46,900 Doctype basically lets the web browser know that this type of documents and paste here are five document 10 00:00:47,370 --> 00:00:56,220 and then we've caught the head section and the body section most tags this mail tags got hopefully and 11 00:00:56,280 --> 00:01:01,090 they close it close in use identifier with the slash. 12 00:01:01,200 --> 00:01:04,070 He can see all right. 13 00:01:04,450 --> 00:01:08,430 You can see all saw the tags are well in their tent. 14 00:01:08,640 --> 00:01:13,780 It's always good to indent your code so you can read it better. 15 00:01:13,780 --> 00:01:16,810 It also helps others who have to read your code. 16 00:01:17,040 --> 00:01:24,400 So look at this structure here you can tell that the head and the body are both children off hastier 17 00:01:24,600 --> 00:01:26,700 male mr. tag here. 18 00:01:26,750 --> 00:01:31,590 I just me to complete at least the age team. 19 00:01:33,150 --> 00:01:38,420 Autoline tack Mr L O. 20 00:01:39,800 --> 00:01:41,900 So detax is now paid. 21 00:01:41,900 --> 00:01:45,060 He can see the on day dotted on the line there. 22 00:01:45,130 --> 00:01:52,040 Mike is the one here tells your daddy tags are paid so we're gonna start filling up each of these tags 23 00:01:52,340 --> 00:02:02,660 now to make things move a bit faster because I don't want this lecture to go on forever. 24 00:02:02,690 --> 00:02:11,660 I've already seen read written the code so I will just explain part bits and pieces of the code as I 25 00:02:11,720 --> 00:02:13,230 paste them in. 26 00:03:11,500 --> 00:03:22,180 You can see higher have also indented so you can tell from the indentation that line four to eight are 27 00:03:22,210 --> 00:03:24,310 children of the head section. 28 00:03:24,310 --> 00:03:27,150 As you can see in them on their head. 29 00:03:27,160 --> 00:03:34,150 So let me run through the contents of the hets section so whatever's in the head section is for information 30 00:03:34,150 --> 00:03:35,150 purposes. 31 00:03:35,260 --> 00:03:42,060 They're not actually visible to the visitor so they make that set. 32 00:03:43,360 --> 00:03:47,250 You use that to define the cool the character set. 33 00:03:47,260 --> 00:03:50,780 You are using this standard is you have it. 34 00:03:50,860 --> 00:03:57,850 You can read up on it if you if you want to because I may not and don't want to collaborate on it too 35 00:03:57,850 --> 00:04:05,260 much in this lecture so that we don't miss out on the irrelevant stuff the middle name here again is 36 00:04:05,280 --> 00:04:08,350 viewport in green. 37 00:04:08,350 --> 00:04:16,980 Here is an attribute but value are always enclosed in quotes wherever you see these viewport here. 38 00:04:17,080 --> 00:04:21,340 And you notice I have specified these values here. 39 00:04:21,580 --> 00:04:28,210 You mean that so that any device can be used to view the web page of the application. 40 00:04:28,210 --> 00:04:36,520 So each tool enables the screen size whatever screen size you use it will fit and tapped to that screen 41 00:04:36,520 --> 00:04:37,150 size. 42 00:04:37,240 --> 00:04:41,630 That's what this or is bit in here is this skill. 43 00:04:41,680 --> 00:04:49,910 This Care basically is some level right on online 6 here have caught the title for my form line 7. 44 00:04:49,930 --> 00:04:57,130 I have attached a link to my style sheet which is the style sheet I have created here which is this 45 00:04:57,130 --> 00:05:02,000 one here so I'm just attached a link to that. 46 00:05:02,000 --> 00:05:14,590 I've also got cause to be using a query Jake Query is a javascript library so rudduck install it. 47 00:05:14,620 --> 00:05:24,340 I have created a reference to it via a CDL and see the end means content delivery network gryder don't 48 00:05:24,400 --> 00:05:29,160 install it install in it access it directly from Google. 49 00:05:29,160 --> 00:05:30,420 This is very useful. 50 00:05:30,610 --> 00:05:37,450 So if you want to know how this works just typing see the n in your browser and it will tell you all 51 00:05:37,450 --> 00:05:38,340 about it. 52 00:05:38,380 --> 00:05:41,610 So I've attached in reference to that here. 53 00:05:41,800 --> 00:05:52,300 Okay so this will enable me to use due query in this project so that's it for this head section or case 54 00:05:52,300 --> 00:06:01,840 or I have now pasted some code in some posted some coding in to the body section which is from line 55 00:06:01,870 --> 00:06:03,020 12. 56 00:06:03,310 --> 00:06:06,210 Or the way to lying. 57 00:06:06,310 --> 00:06:08,110 Thirty three. 58 00:06:08,110 --> 00:06:13,900 So basically this tags will use to create the ouch or form. 59 00:06:14,270 --> 00:06:16,560 So inside here. 60 00:06:16,570 --> 00:06:18,360 Again notice indented. 61 00:06:18,380 --> 00:06:21,670 Then promptly notice the form. 62 00:06:21,690 --> 00:06:22,500 This is what you. 63 00:06:22,520 --> 00:06:25,510 This is the tag you'd need to create a form. 64 00:06:25,600 --> 00:06:35,590 So this is the open tag folder form and then if I as good write down have got the closing tag their 65 00:06:36,070 --> 00:06:38,970 hide inside that form element. 66 00:06:38,980 --> 00:06:49,960 We all saw courts and gotten hate one tag wanted to send headend tag and then we all got a field set 67 00:06:50,050 --> 00:06:55,390 for the form woodhall used to identify the various fields. 68 00:06:55,410 --> 00:06:57,760 Label is used to label the form. 69 00:06:57,790 --> 00:07:02,820 For example we'll label this as an attribute and the value is name. 70 00:07:02,980 --> 00:07:08,650 So my form me when I launch it or have this filled acquired name. 71 00:07:08,810 --> 00:07:15,800 It's got an import import basically is where you type in something that's an input field. 72 00:07:15,850 --> 00:07:23,880 Give it values text so everything in green here is an attribute and values are enclosed in quotes. 73 00:07:23,950 --> 00:07:26,780 I've also given it an Heidi here. 74 00:07:27,010 --> 00:07:30,300 Code name so if you notice the same thing here. 75 00:07:30,300 --> 00:07:37,840 So that would be the named section where people would type their name and this have also attached a 76 00:07:37,840 --> 00:07:40,430 class here called stored. 77 00:07:40,450 --> 00:07:45,250 Well use this class later we in charge have a script again. 78 00:07:45,250 --> 00:07:46,690 Same process. 79 00:07:46,720 --> 00:07:54,430 This is where they all enter their email label again to label the field and the attributes. 80 00:07:54,430 --> 00:07:56,990 Then we've got some idea as well. 81 00:07:57,040 --> 00:08:03,380 And also this class here remember that a class can be reused several times. 82 00:08:03,400 --> 00:08:05,660 An idea is unique. 83 00:08:05,950 --> 00:08:07,800 So this is a text area. 84 00:08:08,100 --> 00:08:14,040 Actually typed that message again the label tag here to label it. 85 00:08:14,150 --> 00:08:15,690 And this is the attribute. 86 00:08:16,090 --> 00:08:20,100 The value is message gain tash. 87 00:08:20,160 --> 00:08:23,880 This same class here called stored. 88 00:08:23,880 --> 00:08:32,410 I'm gonna use this later for power scripts javascript and then this is the end of the field set for 89 00:08:32,410 --> 00:08:35,790 the form and then attached to a button. 90 00:08:35,910 --> 00:08:37,690 This will be the submit button. 91 00:08:37,710 --> 00:08:43,920 So when people are finished they'll submit their And that's the end of the form and then attached is 92 00:08:43,920 --> 00:08:44,610 script. 93 00:08:44,640 --> 00:08:49,110 Here a link to our javascript that we will. 94 00:08:49,890 --> 00:08:53,060 So this would be the link to the javascript. 95 00:08:53,060 --> 00:08:59,430 It's always good to attach javascript files just before it close in body tag. 96 00:08:59,490 --> 00:09:07,760 That way it does not prevent the contents from loaded so that is it for this section. 97 00:09:07,800 --> 00:09:11,820 We have now created the structure for our form. 98 00:09:11,830 --> 00:09:18,510 If I save this and then we can view and see what the form looks like and the moment I just click save 99 00:09:18,540 --> 00:09:21,180 or so. 100 00:09:21,210 --> 00:09:27,140 This is what the form should look like at the moment without any success applied so you can see here. 101 00:09:27,150 --> 00:09:31,020 This makes it pretty So this is it for the form. 102 00:09:31,020 --> 00:09:34,290 So if you've got something like this well done. 103 00:09:35,580 --> 00:09:38,900 So sit for this lecture in the next lecture. 104 00:09:38,940 --> 00:09:45,980 We are going to implement csx to make this form look a bit prettier. 105 00:09:45,990 --> 00:09:47,220 Thanks for watching. 106 00:09:47,220 --> 00:09:48,160 Bye for now.